<template>
	<view class="recommend_page_main">
		<scroll-view refresher-background="#fff" scroll-y="true" refresher-enabled="true"
			:refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			show-scrollbar="false" @scroll="handleScroll">
			<view class="swiper_view">
				<!-- <uni-swiper-dot class="dot" @clickItem=clickItem :current="current" mode="default"> -->
				<swiper indicator-dots="true" indicator-active-color="#fff" circular="true" autoplay="true"
					interval="5000" duration="1000" class="swiper-container" :current="swiperDotIndex">
					<swiper-item class="swiper-item-home" v-for="(item, index) in info" :key="index"
						@click="toCurrentSwiperPage(item)">
						<image :src="item.swiperImg" mode="aspectFill" />
						<view class="star-view">
							<uni-icons type="star" size="30" color="#fff"></uni-icons>
							<!-- <uni-icons type="star-filled" size="30" color="#66596b"></uni-icons> -->
						</view>
						<view class="swiper-item-desc">
							<view class="desc-name">
								<view class="swiper-name">
									{{item.swiperName}}
								</view>
								<view class="swiper-price" v-if="item.swiperType === '商品'">
									{{item.swiperPrice}}
								</view>
							</view>
							<!-- <view class="circle-view">
								<view class="small-circle-view">
									ok
								</view>
							</view> -->
						</view>
					</swiper-item>
				</swiper>
				<!-- </uni-swiper-dot> -->
			</view>
			<!-- <view class="zixun_view">
				<view class="header_name">
					<view class="header_view" @click="toChatRoomPage">
						<image class="header_avatar" :src="consultantInfo.avatar" mode="aspectFill">
						</image>
					</view>
					<view class="name_pos">
						<view class="name_view">{{consultantInfo.name}}</view>
						<view class="pos_view">{{consultantInfo.desc}}</view>
					</view>
				</view>
				<view class="wenJu_view">{{consultantInfo.dynamic_name}}</view>
				<view class="reMenBg_image" :style="{ backgroundImage: 'url(' + consultantInfo.infoBg + ')' }">
					<view class="reMen_font" v-for="(item,index) in consultantInfo.reMenHuaTis" :key="index">{{item}}
					</view>
				</view>
				<view class="ziXun_btn_view">
					<button type="default" plain="true" class="online_zixun_btn" @click="goToZiXun">在 线 咨 询</button>
				</view>
			</view> -->

			<!-- 疆屿计划&&旅行卡 -->
			<view class="jy_plan-card">
				<view class="jy_plan_image" @click="clickJyPlan">
					<image :src="jyPlanImg" mode="aspectFill"></image>
				</view>
				<view class="jy_plan_image" @click="toTravelCardPage">
					<image :src="travelCardImg" mode="aspectFill"></image>
				</view>
			</view>

			<view class="uerDongTaiList_view" v-for="(item,index) in userListDongTais">
				<view class="main_page_users_dongTai_img" v-if="item.isDynamicImage">
					<!-- <view class="images_per" v-for="(url,index) in item.imageUrls" :key="index">
						<image :src="url" mode="aspectFill" @click="preViewImage(item.imageUrls,index)"></image>
					</view> -->
					<view class="show-images" @click="toDynamicDetail(item)">
						<view class="show-one-image" v-if="item.imgCount === 1">
							<!-- <image :src="item.imageObj.firstImg" mode="aspectFill"></image> -->
							<view class="img-one-bg"
								:style="{ backgroundImage: `url(${item.imageObj.firstImg})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }">
							</view>
							<view class="img-one-bg-main">
								<view class="avatar-one-username-vip">
									<view class="one-avatar">
										<image :src="item.avatar" mode="aspectFill"></image>
									</view>
									<view class="one-username">
										{{item.userName}}
									</view>
									<!-- <view class="vip-view">
										<view class="jyapp-name">
											疆屿
										</view>
										<view class="vip-image">
											<image src="@/static/icons/vip.png" mode="aspectFill"></image>
										</view>
									</view> -->
								</view>
								<view class="content_text_view">
									{{item.contentText}}
								</view>
							</view>
						</view>
						<view class="show-four-image" v-else>
							<view class="show-four-image-area">
								<view class="left-images">
									<view class="left-top-image">
										<image :src="item.imageObj.firstImg" mode="aspectFill"></image>
									</view>
									<view class="left-bottom-image" v-if="item.imageObj.thirdImg!==''">
										<image :src="item.imageObj.thirdImg" mode="aspectFill"></image>
									</view>
								</view>
								<view class="right-images">
									<view class="right-top-image" v-if="item.imageObj.secondImg!==''">
										<image :src="item.imageObj.secondImg" mode="aspectFill"></image>
									</view>
									<view class="right-bottom-image" v-if="item.imageObj.fourthImg!==''">
										<image :src="item.imageObj.fourthImg" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view class="author-content" v-if="item.video !== '' || item.imgCount !== 1">
								<view class="author-content-card">
									<view class="user_view_header">
										<view class="user_avatar_view" @click.stop="toUserPage(item)">
											<image :src="item.avatar" mode="aspectFill"></image>
										</view>
										<view class="name_icon">
											<view class="user_name_view" @click.stop="toUserPage(item)">
												{{item.userName}}
											</view>
										</view>
										<!-- <view class="vip-view">
											<view class="jyapp-name">
												疆屿
											</view>
											<view class="vip-image">
												<image src="@/static/icons/vip.png" mode=""></image>
											</view>
										</view> -->
									</view>
									<view class="content_title_text" @click.stop="toDynamicDetail(item)">
										<view class="content_text_view">
											{{item.contentText}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="comment-like-view">
						<view class="chat-comment" @click.stop="toDynamicDetail(item)">
							<uni-icons type="chat" size="25" color="#fff"></uni-icons>
						</view>
						<view class="chat-comment" @click.stop="clickThumbsUp(item.dynamicAid)">
							<uni-icons v-if="!item.isThumbsUp" :type="item.handType" size="25"
								:color="item.thumbsupColor"></uni-icons>
							<uni-icons v-else :type="item.handType" size="25" :color="item.thumbsupColor"></uni-icons>
						</view>
					</view>
				</view>
				<view class="main_page_users_dongTai_video" v-else>
					<!-- <video ref="videoPlayers" id="videoPlayer{{index}}" :src="item.video" controls></video> -->
					<!-- 由于uniapp组件video层级太高，所以用自定义的视频组件 -->
					<view class="my-video-player-poster">
						<!-- <DomVideoPlayer :poster="item.poster" class="my-video" :src="item.video" :autoplay="false" muted
							:isLoading="true" @click.passive="toDynamicDetail(item)">
						</DomVideoPlayer> -->
						<image :src="item.poster" mode="aspectFill" @click.passive="toDynamicDetail(item)"></image>
					</view>

					<view class="comment-like-view">
						<view class="chat-comment" @click.stop="toDynamicDetail(item)">
							<uni-icons type="chat" size="25" color="#fff"></uni-icons>
						</view>
						<view class="chat-comment" @click.stop="clickThumbsUp(item.dynamicAid)">
							<uni-icons v-if="!item.isThumbsUp" :type="item.handType" size="25"
								:color="item.thumbsupColor"></uni-icons>
							<uni-icons v-else :type="item.handType" size="25" :color="item.thumbsupColor"></uni-icons>
						</view>
					</view>
					<view class="author-content" v-if="item.video !== '' || item.imgCount !== 1">
						<view class="author-content-card">
							<view class="user_view_header">
								<view class="user_avatar_view" @click.stop="toUserPage(item)">
									<image :src="item.avatar" mode="aspectFill"></image>
								</view>
								<view class="name_icon">
									<view class="user_name_view" @click.stop="toUserPage(item)">{{item.userName}}</view>
								</view>
								<!-- <view class="vip-view">
									<view class="jyapp-name">
										疆屿
									</view>
									<view class="vip-image">
										<image src="@/static/icons/vip.png" mode=""></image>
									</view>
								</view> -->
							</view>
							<view class="content_title_text" @click.stop="toDynamicDetail(item)">
								<view class="content_text_view">
									{{item.contentText}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 弹窗（用户发的动态：右边的三个点弹出弹窗） -->
		<uni-popup ref="popup" background-color="#f0f0f0">
			<view class="popup-content">
				<view class="top_popup">
					<view class="guanzhu" @click="follower">
						{{followerText}}
					</view>
					<view class="dislike" @click="disLikeThisDynamic">
						不喜欢该内容
					</view>
				</view>
				<view class="cancel" @click="closePopup">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getSwiperImage,
		getOnlineConsultantInfoAndUserDynamic,
	} from '@/request/recover.js';
	import {
		followerAuthor,
		disLikeThisDynamicApi,
		handUpOrHandDown,
	} from '../../../../request/user';
	import mitter from '@/common/mitt/eventBus.js'
	export default {
		data() {
			return {
				travelCardImg: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/home-page/%E6%97%85%E8%A1%8C%E5%8D%A1.png', // 旅行卡图片地址
				jyPlanImg: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/home-page/%E7%96%86%E5%B1%BF%E8%AE%A1%E5%88%92.png', // 疆屿计划
				currentPage: 1, // 当前页码，初始化为1，用于记录当前请求数据所在的页码，下拉刷新时会递增
				pageSize: 10, // 每页显示的动态数量，可根据实际需求调整，这里假设每页展示10条动态
				// 用于存储每个视频组件的相关信息对象的数组，每个对象对应一个视频
				videoInfos: [],
				// 记录页面滚动的距离
				scrollTop: 0,
				// dotsStyles: {
				// 	backgroundColor: '#fff',
				// 	selectedBackgroundColor: '#ffffff'
				// },
				followerText: '关注', // 关注还是已关注
				currentClickAuthorName: '', // 当前点击的这条动态的作者的姓名
				currentClickAuthorAid: 1, // 当前点击的这条动态的作者的用户aid
				currentClickDynamicAid: 1, // 当前点击的这条动态的aid
				triggered: false,
				current: 0,
				swiperDotIndex: 0, // 当前轮播图的索引
				consultantInfo: {
					name: '疆屿在线顾问',
					desc: '您的专属在线咨询顾问',
					dynamic_name: '您可能想要了解以下热门信息',
					reMenHuaTis: [
						'金秋十月，选购享超值好礼',
						'现在选购，领取众多优惠券',
						'全国购物补贴倒计时',
						'点此预约，免费抽取好物'
					],
					infoBg: 'https://img1.baidu.com/it/u=4199833826,4153660103&fm=253&fmt=auto?w=1422&h=800',
					avatar: 'https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg'
				},
				info: [],
				userListDongTais: [
				// 	{
				// 	avatar: 'https://img0.baidu.com/it/u=3786625063,3929489332&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
				// 	userName: '王林',
				// 	userAid: 1,
				// 	dynamicAid: 1, // 动态aid
				// 	address: '杭州市下沙区',
				// 	contentTilte: '妈耶，有宝藏',
				// 	contentText: '今天淘到了好东西！货收到了，质量很好。',
				// 	imageUrls: 'https://img1.baidu.com/it/u=2438395032,3055324758&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
				// 	fromWhere: '来自TA的动态',
				// 	commentNum: '302',
				// 	dianZanNum: '432',
				// 	isFollower: false,
				// 	isThumbsUp: false,
				// 	thumbsupColor: '#fff',
				// 	handType: 'hand-up',
				// 	video: '',
				// 	isDynamicImage: true, // 这个动态是否是图片
				// 	imageObj: {
				// 		firstImg: '',
				// 		secondImg: '',
				// 		thirdImg: '',
				// 		fourthImg: '',
				// 	},
				// }, {
				// 	avatar: 'https://img1.baidu.com/it/u=1090452517,2487311686&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=501',
				// 	userName: '我爱吃西红柿',
				// 	userAid: 2,
				// 	dynamicAid: 2, // 动态aid
				// 	address: '',
				// 	contentTilte: '值得剁手',
				// 	contentText: '用起来顺畅多了，打游戏一点都不卡',
				// 	imageUrls: 'https://img0.baidu.com/it/u=980603677,2749882081&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=631',
				// 	fromWhere: '来自TA的动态',
				// 	commentNum: '1000',
				// 	dianZanNum: '1.2W',
				// 	isFollower: false,
				// 	isThumbsUp: false,
				// 	thumbsupColor: '#fff',
				// 	handType: 'hand-up',
				// 	video: '',
				// 	isDynamicImage: true, // 这个动态是否是图片
				// 	imageObj: {
				// 		firstImg: '',
				// 		secondImg: '',
				// 		thirdImg: '',
				// 		fourthImg: '',
				// 	},
				// }, {
				// 	avatar: 'https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg',
				// 	userName: '我是小阿衰',
				// 	userAid: 3,
				// 	dynamicAid: 3, // 动态aid
				// 	address: '永康市',
				// 	contentTilte: '愉快的周末',
				// 	contentText: '‌帐篷是户外活动中不可或缺的装备，它不仅提供了遮风避雨的庇护所，还成为了人们亲近自然、享受户外生活的桥梁。‌帐篷的质量直接关系到露营体验的好坏，好的帐篷应该具备以下几个特点：首先，帐篷的搭建应该简便快速，能够迅速为户外爱好者提供一个舒适的休息空间；其次，帐篷的材料应该结实耐用，能够抵御各种恶劣的天气条件；最后，帐篷的设计应该注重细节，如良好的通风性和足够的内部空间，以确保舒适度和使用体验‌',
				// 	imageUrls: 'https://img1.baidu.com/it/u=2444417959,2408892133&fm=253&fmt=auto&app=138&f=JPEG?w=860&h=500',
				// 	fromWhere: '来自TA的动态',
				// 	commentNum: '2000',
				// 	dianZanNum: '2.3W',
				// 	isFollower: false,
				// 	isThumbsUp: false,
				// 	thumbsupColor: '#fff',
				// 	handType: 'hand-up',
				// 	video: '',
				// 	isDynamicImage: true, // 这个动态是否是图片
				// 	imageObj: {
				// 		firstImg: '',
				// 		secondImg: '',
				// 		thirdImg: '',
				// 		fourthImg: '',
				// 	},
				// }
				],
			}
		},

		mounted() {
			const self = this;
			// 获取轮播图信息
			this.getSwiper();
			// 获取在线顾问发的热门信息和用户发的动态
			this.getUserDynamic(this.currentPage, this.pageSize);
			mitter.on('releaseNoteSuccess', (data) => {
				if (data) {
					// 调用封装的函数获取最新数据
					self.getUserDynamic(1, 10)
				}
			})
		},
		beforeDestroy() {
			mitter.off('releaseNoteSuccess');
		},
		onHide() {
			mitter.off('releaseNoteSuccess');
		},

		// onHide() {
		// 	this.currentPage = 1;
		// 	this.userListDongTais = []
		// },

		// onShow() {
		// 	this.currentPage = 1;
		// 	this.getUserDynamic(this.currentPage,this.pageSize)
		// },

		methods: {

			// 获取在线顾问发的热门信息和用户发的动态
			getUserDynamic(page, size) {
				const params = {
					page: page,
					size: size
				};
				getOnlineConsultantInfoAndUserDynamic(params).then(res => {
					// console.log(res);
					this.consultantInfo = res.data.data.consultantInfo;
					// this.userListDongTais = res.data.data.userListDongTais;
					const userList = res.data.data.userListDongTais;
					if (userList.length === 0) {
						// 如果获取到的用户动态数据列表为空，说明已到最后一页，重置当前页码为1
						this.currentPage = 1;
						// 重新发起获取第一页数据的请求
						this.getUserDynamic(1, this.pageSize);
					} else {
						this.userListDongTais = userList;
					}
				}).catch(err => {
					console.log(err);
				})
			},

			// 去聊天页面
			// toChatRoomPage() {

			// },

			// 点击图片预览
			// preViewImage(urls, index) {
			// 	uni.previewImage({
			// 		urls: urls,
			// 		current: index,
			// 	})
			// },

			// 点击动态标题或者内容跳转详情（点击评论图标也跳转）
			toDynamicDetail(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/component/topBar/travel/noteDetailPage?aid=${item.dynamicAid}`
				})
			},

			// 点击点赞图标
			clickThumbsUp(dynamicAid) {
				const params = {
					dynamicAid: dynamicAid,
					type: '动态',
				}
				handUpOrHandDown(params).then(res => {
					console.log(res);
					if (res.data.code === 10000) {
						this.getUserDynamic(this.currentPage, this.pageSize);
					} else {
						uni.showToast({
							title: '系统异常',
							icon: 'error'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '系统异常',
						icon: 'error'
					})
				})
			},

			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},

			// 点击关注
			follower() {
				// 请求后端：如果当前用户关注了这条动态的作者，就取消关注；如果没关注，就关注
				const params = {
					authorAid: this.currentClickAuthorAid,
					authorName: this.currentClickAuthorName,
				}
				followerAuthor(params).then(res => {
					if (res.data.code === 10000) {
						if (this.followerText === '关注') {
							uni.showToast({
								title: '已关注'
							})
							this.followerText = '已关注'
						} else {
							uni.showToast({
								title: '已取消关注'
							})
							this.followerText = '关注'
						}
					} else {
						uni.showToast({
							title: '系统异常',
							icon: 'error'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '系统异常',
						icon: 'error'
					})
				});
				this.$refs.popup.close();
			},

			// 点击不喜欢该内容
			disLikeThisDynamic() {
				// 请求后端，将本条动态aid添加到当前登录用户的user表的不喜欢里
				const params = {
					dynamicAid: this.currentClickDynamicAid
				}
				disLikeThisDynamicApi(params).then(res => {
					if (res.data.code === 10000) {
						uni.showToast({
							title: res.data.message
						})
						// 获取的首页用户的动态数据都是出去当前用户不喜欢的，再请求一次
						this.getUserDynamic(this.currentPage, this.pageSize);
					} else {
						uni.showToast({
							title: '请重试',
							icon: 'error'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '请重试',
						icon: 'error'
					})
				});
				this.$refs.popup.close();
			},

			// 自定义下拉刷新被触发
			onRefresh() {
				// 页码加1，准备获取下一页的数据
				this.currentPage++;
				setTimeout(() => {
					this.triggered = false;
					// 获取轮播图信息
					this.getSwiper();
					// 调用获取动态数据的方法，并传递当前页码和每页数量作为参数
					this.getUserDynamic(this.currentPage, this.pageSize);
				}, 1000)
			},

			handleScroll(e) {
				// this.scrollTop = e.detail.scrollTop;
				// const query = uni.createSelectorQuery().in(this);
				// const videos = [];
				// for (let i = 0; i < this.userListDongTais.length; i++) {
				// 	videos.push(query.select(`.my-video:nth-child(${i + 1})`));
				// }
				// console.log(videos);
				// query.exec((res) => {
				// 	if (res && res.length > 0) {
				// 		const videoRects = res;
				// 		let firstVisibleVideoIndex = -1;
				// 		for (let i = 0; i < videoRects.length; i++) {
				// 			if (videoRects[i][0] && videoRects[i][0].top >= this.scrollTop && videoRects[i][0]
				// 				.top <= this.scrollTop + uni.getSystemInfoSync().windowHeight) {
				// 				firstVisibleVideoIndex = i;
				// 				break;
				// 			}
				// 		}
				// 		if (firstVisibleVideoIndex > -1) {
				// 			const videoRefs = this.$refs;
				// 			for (let key in videoRefs) {
				// 				if (key.startsWith('video')) {
				// 					const videoComponent = videoRefs[key];
				// 					if (parseInt(key.slice(5)) === firstVisibleVideoIndex) {
				// 						if (!videoComponent.playing) {
				// 							videoComponent.play();
				// 						}
				// 					} else {
				// 						if (videoComponent.playing) {
				// 							videoComponent.pause();
				// 						}
				// 					}
				// 				}
				// 			}
				// 		}
				// 	}
				// });
			},

			// 获取轮播图信息
			getSwiper() {
				const that = this;
				let newInfo = [];
				getSwiperImage().then(res => {
					// console.log(res);
					for (let element of res.data.data) {
						let swiper = {
							swiperId: element.aid,
							swiperName: element.name,
							swiperImg: element.url,
							swiperType: element.type,
							swiperPrice: element.price
						}
						newInfo.push(swiper);
					}
					that.info = newInfo;
				})
			},

			// 点击在线咨询
			goToZiXun() {
				console.log('我点击了');
			},
			// change(e) {
			// 	this.current = e.detail.current
			// },

			// clickItem(e) {
			// 	this.swiperDotIndex = e
			// },
			// 点击轮播图跳转
			toCurrentSwiperPage(swiper) {
				console.log(swiper);
				if (swiper.swiperType === "商品") {
					uni.navigateTo({
						url: '/pages/tabBar/extUI/shopping_topBar/goodDetail?goodAid=' + swiper.swiperId +
							'&goodName=' + decodeURI(swiper.swiperName)
					})
				}

			},
			// 点击动态的右边的三个点弹出弹窗
			showMoreDoModal(item) {
				// 更新关注数据，再请求一次首页数据
				this.getUserDynamic(this.currentPage, this.pageSize);
				this.currentClickAuthorAid = item.userAid;
				this.currentClickAuthorName = item.userName;
				this.currentClickDynamicAid = item.dynamicAid;
				if (item.isFollower) {
					this.followerText = '已关注';
				} else {
					this.followerText = '关注';
				}
				this.$refs.popup.open('bottom');
			},
			// 点击取消关闭弹窗
			closePopup() {
				this.$refs.popup.close();
			},
			// 点击头像和用户名去用户主页
			toUserPage(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/template/userDetailPage?aid=${item.userAid}`
				})
			},

			clickJyPlan() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},

			toTravelCardPage() {
				uni.navigateTo({
					url: '/pages/tabBar/component/topBar/card/punchClockPage'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../../common/uni-nvue.css';

	.recommend_page_main {
		width: 100%;
		padding-top: 80px;
	}

	.recommend_page_main scroll-view {
		height: calc(100vh - 380rpx);
		width: 88%;
		margin-left: auto;
		margin-right: auto;
		background-color: #fff;
	}

	.online_zixun_btn {
		border-radius: 80rpx;
	}

	.name_icon {
		// width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.main_page_users_dongTai_img {
		width: 100%;
		// margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		border-radius: 30rpx 30rpx 0 0;

		.show-images {
			width: 100%;
			padding: 0;
			border-radius: 30rpx 30rpx 0 0;

			.show-one-image {
				width: 100%;
				border-radius: 30rpx;

				.img-one-bg {
					width: 100%;
					height: 500rpx;
					border-radius: 30rpx 30rpx 0 0;
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;
				}

				.img-one-bg-main {
					width: 100%;
					margin-left: auto;
					margin-right: auto;
					border-radius: 0 0 30rpx 30rpx;
					background-color: #f6f6f8;
					padding-bottom: 10px;

					.avatar-one-username-vip {
						display: flex;
						align-items: center;
						width: 90%;
						margin-left: auto;
						margin-right: auto;
						padding-top: 10px;

						.one-avatar {
							image {
								width: 23px;
								height: 23px;
								border-radius: 50%;
							}
						}

						.one-username {
							font-size: 14px;
							letter-spacing: 4rpx;
							color: #000;
							margin-left: 8px;

						}

						.vip-view {
							width: 43px;
							height: 13px;
							border-radius: 7px;
							background-color: #3ED598;
							margin-left: 8px;
							display: flex;
							align-items: center;
							justify-content: space-evenly;

							.jyapp-name {
								font-size: 8px;
								color: #000;
							}

							.vip-image {
								image {
									width: 9px;
									height: 9px;
								}
							}
						}
					}

					.content_text_view {
						font-size: 12px;
						color: #000;
						width: 90%;
						margin-left: auto;
						margin-right: auto;
					}

				}
			}

			.show-four-image {
				// display: flex;
				// justify-content: space-between;
				border-radius: 30rpx;
				position: relative;

				.show-four-image-area {
					display: flex;
					justify-content: space-between;

					.left-images {
						border-radius: 30rpx 0 0 0;
						width: 49.7%;

						.left-top-image {
							width: 100%;
							height: 350rpx;
							border-radius: 30rpx 0 0 0;

							image {
								width: 100%;
								height: 350rpx;
								border-radius: 30rpx 0 0 0;
							}
						}

						.left-bottom-image {
							margin-top: 2px;
							width: 100%;
							height: 250rpx;

							image {
								width: 100%;
								height: 250rpx;
							}
						}
					}

					.right-images {
						width: 49.7%;
						border-radius: 0 30rpx 30rpx 0;

						.right-top-image {
							width: 100%;
							height: 250rpx;
							border-radius: 0 30rpx 0 0;

							image {
								width: 100%;
								height: 250rpx;
								border-radius: 0 30rpx 0 0;
							}
						}

						.right-bottom-image {
							margin-top: 2px;
							width: 100%;
							height: 350rpx;

							image {
								width: 100%;
								height: 350rpx;
							}
						}
					}
				}



				.author-content {
					.content_title_text {
						.content_text_view {
							font-size: 12px;
							color: #000;
						}
					}
				}
			}

		}
	}

	.images_per image {
		width: 320rpx;
		height: 320rpx;
	}

	.images_per {
		margin-right: 10rpx;
	}



	.popup-content {
		height: 30vh;
		text-align: center;
		font-size: 40rpx;
		color: #424242;
		display: flex;
		letter-spacing: 3rpx;
		flex-direction: column;
		justify-content: space-between;
	}

	.top_popup {
		background-color: #fff;
	}

	.guanzhu {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.dislike {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cancel {
		background-color: #fff;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main_page_users_dongTai_video {
		/* background-color: #424242; */
		width: 100%;
		position: relative;
		border-radius: 30rpx;

		.my-video-player-poster {
			width: 100%;
			height: 400rpx;
			// background-color: #30444E;
			border-radius: 30rpx 30rpx 0 0;

			image {
				width: 100%;
				height: 400rpx;
				border-radius: 30rpx 30rpx 0 0;
			}
		}

		.author-content {
			.content_title_text {
				.content_text_view {
					font-size: 12px;
					color: #000;
				}
			}
		}
	}

	.swiper-container {
		border-radius: 25px;
		width: 100%;
		height: 400px;
		// background-color: #66596c;

		.swiper-item-home {
			width: 100%;
			border-radius: 25px;
			display: flex;
			flex-direction: column;
			height: 400px;
			position: relative;

			image {
				border-radius: 25px 25px 0 0;
				width: 100%;
				height: 400px;
			}

			.swiper-item-desc {
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.2);
				height: 50px;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30px;

				.desc-name {

					.swiper-name {
						color: #fff;
						font-size: 18px;
						font-weight: 700;
						letter-spacing: 2px;
					}

					.swiper-price {
						margin-top: 20rpx;
						color: #fff;
						font-size: 18px;
						font-weight: 700;
					}
				}


			}
		}
	}

	.dot {
		border-radius: 25px 25px 0 0;
	}

	.chat-comment {
		width: 39px;
		height: 39px;
		background: rgba(216, 216, 216, 0.3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.comment-like-view {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		width: 160rpx;
		z-index: 2;
		display: flex;
		display: flex;
		justify-content: space-between;
	}

	.author-content {
		width: 100%;
		border-radius: 0 0 30rpx 30rpx;
		background-color: #f6f6f8;
	}

	.author-content-card {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 15px;
		padding-bottom: 15px;
		// background-color: #000;
	}

	.star-view {
		width: 45px;
		height: 45px;
		background-color: rgba(255, 255, 255, 0.35);
		position: absolute;
		top: 20px;
		left: 20px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-view {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.small-circle-view {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #834F10;
		font-weight: bold;
		font-size: 14px;
	}

	.jy_plan_image {
		width: 48%;
	}

	.jy_plan_image image {
		width: 100%;
		height: 200px;
		border-radius: 15px;
	}

	.jy_plan-card {
		width: 100%;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.vip-view {
		width: 43px;
		height: 13px;
		border-radius: 7px;
		background-color: #3ED598;
		margin-left: 8px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

	}

	.vip-image image {
		width: 9px;
		height: 9px;
	}

	.vip-image {
		display: flex;
		align-items: center;

	}

	.jyapp-name {
		font-size: 8px;
	}
</style>